<template>
  <div class="echarts bg">
    <div class="header">
      <div class="header-left bg">
        <div class="header-button-left bg" @click="() => router.back()">首页</div>
      </div>
      <div class="header-center">
        <div class="header-center-body bg">
          <span>智慧大屏</span>
        </div>
      </div>
      <div class="header-right bg">
        <div class="header-button-right bg"><span>统计报告</span></div>
        <div class="time">
          <span>{{ year }}年{{ month }}月{{ day }}日</span>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="left">
        <left></left>
      </div>
      <div class="center">
        <centerMap></centerMap>
        <centerBottom></centerBottom>
      </div>
      <div class="right">
        <right></right>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import left from './components/left.vue'
import right from './components/right.vue'
import centerMap from './components/center-map.vue'
import centerBottom from './components/center-bottom.vue'
const date = new Date()
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const router = useRouter()
</script>

<style lang="scss" scoped>
.echarts {
  width: 100vw;
  height: 100vh;
  font-size: 14px;
  background-image: url('./images/bg.png');
  padding: 0 8vw;
  .bg {
    background-size: cover;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .header {
    height: 10vh;
    width: 100%;
    text-align: center;
    color: #3585a9;
    font-weight: 600;
    line-height: 4vh;
    display: flex;
    .header-left {
      flex: 1;
      height: 4vh;
      display: flex;
      justify-content: end;
      background-image: url('./images//dataScreen-header-left-bg.png');
      .header-button-left {
        width: 80px;
        cursor: pointer;
        background-image: url('./images//dataScreen-header-btn-bg-l.png');
      }
    }
    .header-center {
      flex: 2;
      display: flex;
      flex-wrap: nowrap;
      .header-center-body {
        background-image: url('./images//dataScreen-header-center-bg.png');
        height: 8vh;
        line-height: 8vh;
        font-weight: 600;
        font-size: 24px;
        width: 100%;
      }
    }
    .header-right {
      flex: 1;
      height: 4vh;
      display: flex;

      justify-content: space-between;
      background-image: url('./images//dataScreen-header-right-bg.png');
      .header-button-right {
        width: 80px;
        background-image: url('./images//dataScreen-header-btn-bg-r.png');
      }
      .time {
        margin-right: 10px;
      }
    }
  }
  .body {
    width: 100%;
    height: calc(100vh - 10vh);
    display: flex;
    .left {
      height: 100%;
      flex: 1;
    }
    .center {
      flex: 3;
      padding: 0 20px;
    }
    .right {
      flex: 1;
    }
  }
}
</style>
